<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理后台 - 腾讯视频</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #f8fafc;
            color: #1f2937;
        }

        .admin-layout {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 250px;
            background: white;
            border-right: 1px solid #e5e7eb;
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
        }

        .sidebar-header {
            padding: 20px;
            border-bottom: 1px solid #e5e7eb;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }

        .sidebar-header h2 {
            font-size: 18px;
            font-weight: 600;
        }

        .sidebar-nav {
            padding: 20px 0;
        }

        .nav-item {
            display: block;
            padding: 12px 20px;
            color: #6b7280;
            text-decoration: none;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }

        .nav-item:hover {
            background: #f3f4f6;
            color: #374151;
        }

        .nav-item.active {
            background: #e0e7ff;
            color: #667eea;
            border-left-color: #667eea;
        }

        .main-content {
            flex: 1;
            padding: 30px;
        }

        .header {
            background: white;
            padding: 20px 30px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            font-size: 24px;
            font-weight: 700;
            color: #1f2937;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
        }

        .logout-btn {
            background: #ef4444;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s ease;
        }

        .logout-btn:hover {
            background: #dc2626;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-2px);
        }

        .stat-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }

        .stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
        }

        .stat-icon.users { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
        .stat-icon.videos { background: linear-gradient(135deg, #10b981, #059669); }
        .stat-icon.views { background: linear-gradient(135deg, #f59e0b, #d97706); }
        .stat-icon.comments { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

        .stat-title {
            font-size: 14px;
            color: #6b7280;
            font-weight: 500;
        }

        .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: #1f2937;
        }

        .content-section {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-bottom: 20px;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e5e7eb;
        }

        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #1f2937;
        }

        .btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s ease;
        }

        .btn:hover {
            background: #5a67d8;
        }

        .btn-danger {
            background: #ef4444;
        }

        .btn-danger:hover {
            background: #dc2626;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th,
        .table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
        }

        .table th {
            background: #f9fafb;
            font-weight: 600;
            color: #374151;
        }

        .table tr:hover {
            background: #f9fafb;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #6b7280;
        }

        .error {
            background: #fef2f2;
            color: #dc2626;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #fecaca;
        }

        .success {
            background: #f0fdf4;
            color: #16a34a;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #bbf7d0;
        }

        @media (max-width: 768px) {
            .admin-layout {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
            }
            
            .main-content {
                padding: 20px;
            }
            
            .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
        }
    </style>
</head>
<body>
    <div class="admin-layout">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>管理后台</h2>
            </div>
            <nav class="sidebar-nav">
                <a href="#" class="nav-item active" data-section="dashboard">
                    📊 仪表板
                </a>
                <a href="#" class="nav-item" data-section="videos">
                    🎬 视频管理
                </a>
                <a href="#" class="nav-item" data-section="users">
                    👥 用户管理
                </a>
                <a href="#" class="nav-item" data-section="categories">
                    📂 分类管理
                </a>
                <a href="#" class="nav-item" data-section="comments">
                    💬 评论管理
                </a>
                <a href="#" class="nav-item" data-section="banners">
                    🖼️ 轮播图管理
                </a>
            </nav>
        </div>

        <div class="main-content">
            <div class="header">
                <h1 id="page-title">仪表板</h1>
                <div class="user-info">
                    <div class="user-avatar" id="user-avatar">A</div>
                    <span id="user-name">管理员</span>
                    <button class="logout-btn" onclick="logout()">退出登录</button>
                </div>
            </div>

            <div id="message-container"></div>

            <!-- 仪表板 -->
            <div id="dashboard-section" class="content-section">
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-header">
                            <div class="stat-icon users">👥</div>
                            <div>
                                <div class="stat-title">总用户数</div>
                                <div class="stat-value" id="total-users">-</div>
                            </div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <div class="stat-icon videos">🎬</div>
                            <div>
                                <div class="stat-title">总视频数</div>
                                <div class="stat-value" id="total-videos">-</div>
                            </div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <div class="stat-icon views">👁️</div>
                            <div>
                                <div class="stat-title">总播放量</div>
                                <div class="stat-value" id="total-views">-</div>
                            </div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <div class="stat-icon comments">💬</div>
                            <div>
                                <div class="stat-title">总评论数</div>
                                <div class="stat-value" id="total-comments">-</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 视频管理 -->
            <div id="videos-section" class="content-section" style="display: none;">
                <div class="section-header">
                    <h3 class="section-title">视频管理</h3>
                    <button class="btn" onclick="addVideo()">添加视频</button>
                </div>
                <div id="videos-content">
                    <div class="loading">加载中...</div>
                </div>
            </div>

            <!-- 用户管理 -->
            <div id="users-section" class="content-section" style="display: none;">
                <div class="section-header">
                    <h3 class="section-title">用户管理</h3>
                </div>
                <div id="users-content">
                    <div class="loading">加载中...</div>
                </div>
            </div>

            <!-- 分类管理 -->
            <div id="categories-section" class="content-section" style="display: none;">
                <div class="section-header">
                    <h3 class="section-title">分类管理</h3>
                    <button class="btn" onclick="addCategory()">添加分类</button>
                </div>
                <div id="categories-content">
                    <div class="loading">加载中...</div>
                </div>
            </div>

            <!-- 评论管理 -->
            <div id="comments-section" class="content-section" style="display: none;">
                <div class="section-header">
                    <h3 class="section-title">评论管理</h3>
                </div>
                <div id="comments-content">
                    <div class="loading">加载中...</div>
                </div>
            </div>

            <!-- 轮播图管理 -->
            <div id="banners-section" class="content-section" style="display: none;">
                <div class="section-header">
                    <h3 class="section-title">轮播图管理</h3>
                    <button class="btn" onclick="addBanner()">添加轮播图</button>
                </div>
                <div id="banners-content">
                    <div class="loading">加载中...</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 检查登录状态
        if (!localStorage.getItem('adminToken')) {
            window.location.href = '/admin/login';
        }

        // 显示用户信息
        const adminUser = JSON.parse(localStorage.getItem('adminUser') || '{}');
        document.getElementById('user-name').textContent = adminUser.name || '管理员';
        document.getElementById('user-avatar').textContent = (adminUser.name || 'A').charAt(0).toUpperCase();

        // 导航功能
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 更新导航状态
                document.querySelectorAll('.nav-item').forEach(nav => nav.classList.remove('active'));
                this.classList.add('active');
                
                // 显示对应内容
                const section = this.dataset.section;
                document.querySelectorAll('.content-section').forEach(content => {
                    content.style.display = 'none';
                });
                
                document.getElementById(section + '-section').style.display = 'block';
                document.getElementById('page-title').textContent = this.textContent.trim();
                
                // 加载对应数据
                loadSectionData(section);
            });
        });

        // 加载数据
        async function loadSectionData(section) {
            try {
                const token = localStorage.getItem('adminToken');
                
                switch(section) {
                    case 'dashboard':
                        await loadStats();
                        break;
                    case 'videos':
                        await loadVideos();
                        break;
                    case 'users':
                        await loadUsers();
                        break;
                    case 'categories':
                        await loadCategories();
                        break;
                    case 'comments':
                        await loadComments();
                        break;
                    case 'banners':
                        await loadBanners();
                        break;
                }
            } catch (error) {
                console.error('加载数据失败:', error);
                showMessage('加载数据失败: ' + error.message, 'error');
            }
        }

        // 加载统计数据
        async function loadStats() {
            try {
                const response = await fetch('/api/admin/stats', {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('adminToken'),
                        'Accept': 'application/json'
                    }
                });
                
                const data = await response.json();
                
                if (data.success) {
                    document.getElementById('total-users').textContent = data.data.totalUsers;
                    document.getElementById('total-videos').textContent = data.data.totalVideos;
                    document.getElementById('total-views').textContent = data.data.totalViews.toLocaleString();
                    document.getElementById('total-comments').textContent = data.data.totalComments;
                }
            } catch (error) {
                console.error('加载统计数据失败:', error);
            }
        }

        // 加载视频数据
        async function loadVideos() {
            try {
                const response = await fetch('/api/admin/videos', {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('adminToken'),
                        'Accept': 'application/json'
                    }
                });
                
                const data = await response.json();
                
                if (data.success) {
                    const videosHtml = `
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>标题</th>
                                    <th>分类</th>
                                    <th>播放量</th>
                                    <th>上传时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${data.data.map(video => `
                                    <tr>
                                        <td>${video.id}</td>
                                        <td>${video.title}</td>
                                        <td>${video.category}</td>
                                        <td>${video.views}</td>
                                        <td>${video.uploadDate}</td>
                                        <td>${video.is_featured ? '推荐' : '普通'}</td>
                                        <td>
                                            <button class="btn" onclick="editVideo(${video.id})">编辑</button>
                                            <button class="btn btn-danger" onclick="deleteVideo(${video.id})">删除</button>
                                        </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    `;
                    document.getElementById('videos-content').innerHTML = videosHtml;
                }
            } catch (error) {
                document.getElementById('videos-content').innerHTML = '<div class="error">加载视频数据失败</div>';
            }
        }

        // 加载用户数据
        async function loadUsers() {
            try {
                const response = await fetch('/api/admin/users', {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('adminToken'),
                        'Accept': 'application/json'
                    }
                });
                
                const data = await response.json();
                
                if (data.success) {
                    const usersHtml = `
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>邮箱</th>
                                    <th>注册时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${data.data.map(user => `
                                    <tr>
                                        <td>${user.id}</td>
                                        <td>${user.name}</td>
                                        <td>${user.email}</td>
                                        <td>${user.created_at}</td>
                                        <td>
                                            <button class="btn btn-danger" onclick="deleteUser(${user.id})">删除</button>
                                        </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    `;
                    document.getElementById('users-content').innerHTML = usersHtml;
                }
            } catch (error) {
                document.getElementById('users-content').innerHTML = '<div class="error">加载用户数据失败</div>';
            }
        }

        // 加载分类数据
        async function loadCategories() {
            try {
                const response = await fetch('/api/admin/categories', {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('adminToken'),
                        'Accept': 'application/json'
                    }
                });
                
                const data = await response.json();
                
                if (data.success) {
                    const categoriesHtml = `
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>分类名称</th>
                                    <th>描述</th>
                                    <th>视频数量</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${data.data.map(category => `
                                    <tr>
                                        <td>${category.id}</td>
                                        <td>${category.name}</td>
                                        <td>${category.description}</td>
                                        <td>${category.videos_count}</td>
                                        <td>
                                            <button class="btn" onclick="editCategory(${category.id})">编辑</button>
                                            <button class="btn btn-danger" onclick="deleteCategory(${category.id})">删除</button>
                                        </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    `;
                    document.getElementById('categories-content').innerHTML = categoriesHtml;
                }
            } catch (error) {
                document.getElementById('categories-content').innerHTML = '<div class="error">加载分类数据失败</div>';
            }
        }

        // 加载评论数据
        async function loadComments() {
            try {
                const response = await fetch('/api/admin/comments', {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('adminToken'),
                        'Accept': 'application/json'
                    }
                });
                
                const data = await response.json();
                
                if (data.success) {
                    const commentsHtml = `
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户</th>
                                    <th>视频</th>
                                    <th>评论内容</th>
                                    <th>时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${data.data.map(comment => `
                                    <tr>
                                        <td>${comment.id}</td>
                                        <td>${comment.user_name}</td>
                                        <td>${comment.video_title}</td>
                                        <td>${comment.content}</td>
                                        <td>${comment.created_at}</td>
                                        <td>
                                            <button class="btn btn-danger" onclick="deleteComment(${comment.id})">删除</button>
                                        </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    `;
                    document.getElementById('comments-content').innerHTML = commentsHtml;
                }
            } catch (error) {
                document.getElementById('comments-content').innerHTML = '<div class="error">加载评论数据失败</div>';
            }
        }

        // 加载轮播图数据
        async function loadBanners() {
            try {
                const response = await fetch('/api/admin/banners', {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('adminToken'),
                        'Accept': 'application/json'
                    }
                });
                
                const data = await response.json();
                
                if (data.success) {
                    const bannersHtml = `
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>标题</th>
                                    <th>图片</th>
                                    <th>链接</th>
                                    <th>排序</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${data.data.map(banner => `
                                    <tr>
                                        <td>${banner.id}</td>
                                        <td>${banner.title}</td>
                                        <td><img src="${banner.image_url}" style="width: 60px; height: 40px; object-fit: cover; border-radius: 4px;"></td>
                                        <td>${banner.link_url}</td>
                                        <td>${banner.sort_order}</td>
                                        <td>${banner.is_active ? '启用' : '禁用'}</td>
                                        <td>
                                            <button class="btn" onclick="editBanner(${banner.id})">编辑</button>
                                            <button class="btn btn-danger" onclick="deleteBanner(${banner.id})">删除</button>
                                        </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    `;
                    document.getElementById('banners-content').innerHTML = bannersHtml;
                }
            } catch (error) {
                document.getElementById('banners-content').innerHTML = '<div class="error">加载轮播图数据失败</div>';
            }
        }

        // 显示消息
        function showMessage(message, type) {
            const container = document.getElementById('message-container');
            const messageDiv = document.createElement('div');
            messageDiv.className = type === 'error' ? 'error' : 'success';
            messageDiv.textContent = message;
            container.appendChild(messageDiv);
            
            setTimeout(() => {
                messageDiv.remove();
            }, 5000);
        }

        // 退出登录
        function logout() {
            localStorage.removeItem('adminToken');
            localStorage.removeItem('userType');
            localStorage.removeItem('adminUser');
            window.location.href = '/admin/login';
        }

        // 管理功能
        function addVideo() {
            showMessage('添加视频功能开发中...', 'error');
        }

        function editVideo(id) {
            showMessage(`编辑视频 ${id} 功能开发中...`, 'error');
        }

        function deleteVideo(id) {
            if (confirm('确定要删除这个视频吗？')) {
                showMessage(`删除视频 ${id} 功能开发中...`, 'error');
            }
        }

        function addCategory() {
            showMessage('添加分类功能开发中...', 'error');
        }

        function editCategory(id) {
            showMessage(`编辑分类 ${id} 功能开发中...`, 'error');
        }

        function deleteCategory(id) {
            if (confirm('确定要删除这个分类吗？')) {
                showMessage(`删除分类 ${id} 功能开发中...`, 'error');
            }
        }

        function deleteUser(id) {
            if (confirm('确定要删除这个用户吗？')) {
                showMessage(`删除用户 ${id} 功能开发中...`, 'error');
            }
        }

        function deleteComment(id) {
            if (confirm('确定要删除这条评论吗？')) {
                showMessage(`删除评论 ${id} 功能开发中...`, 'error');
            }
        }

        function addBanner() {
            showMessage('添加轮播图功能开发中...', 'error');
        }

        function editBanner(id) {
            showMessage(`编辑轮播图 ${id} 功能开发中...`, 'error');
        }

        function deleteBanner(id) {
            if (confirm('确定要删除这个轮播图吗？')) {
                showMessage(`删除轮播图 ${id} 功能开发中...`, 'error');
            }
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadStats();
        });
    </script>
</body>
</html>
